<template>
    <div>
        <button @click="modalOpen = true">open full screen modal</button>
        <teleport to="body">
            <div v-if="modalOpen" class="modal">
                <div>
                    I'm a teleport modal!
                    <p>My parent is "body"</p>
                    <button @click="modalOpen = false">Close</button>
                </div>
            </div>
        </teleport>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    const modalOpen = ref<boolean>(false)
</script>
<style lang="less" scoped>
    .modal {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .modal div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: white;
        width: 300px;
        height: 300px;
        padding: 5px;
    }
</style>
